<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test-list</title>
  <!-- 引入Vue -->
  <script src="./vuedev.js"></script>
  <!-- 引入 element UI 的样式 -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 80vw;
      height: 80vh;
      padding: 25px;
      border-radius: 13px;
      background-color: #fff;
      box-shadow: 0px 5px 20px #ccc;
    }

    .nav-container {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: start;
      align-items: center;
    }

    .content {
      width: 100%;
      height: 90%;
      padding-top: 20px;
    }
    .nav-button {
      width: 140px;
    }
  </style>
</head>

<body>

  <div id="root" class="container">
    <div class="nav-container">
      <!-- v-bind的简写 -->
      <el-button
        class="nav-button"
        v-for="(item, index) in navList"
        :key="index"
        :type="item.type"
        @click="filterData(item.key)"
      >
        {{ item.content }}
      </el-button>
      <!-- v-model -->
      <el-input v-model="value" placeholder="请输入内容" style="margin: 0 15px;width: 300px"></el-input>
      <el-select v-model="status" placeholder="请选择" style="margin: 0 15px;">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="addData">添加</el-button>
    </div>
    <div class="content">
      <el-table :data="tableData" style="width: 100%">

        <el-table-column prop="name" label="姓名">
        </el-table-column>

        <el-table-column prop="type" label="状态">
          <!--  插槽  -->
          <template slot-scope="{ row }">
          <!--  scope = { row: { ... } } -->
          <!--  scope.row 就是当前这一行的对象  -->
            <span v-if="row.type === 'success'" style="color: green">
              在线
            </span>
            <span v-if="row.type === 'error'" style="color: red">
              离线
            </span>
          </template>
        </el-table-column>

        <el-table-column label="编辑">
          <!--    const { name, age } = obj  -->
          <!--    scope = { row : { id } }  -->
          <template slot-scope="{ row: { id } }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editData(id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delData(id)"
            ></el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <el-dialog
      title="编辑"
      :visible="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <div>
        <el-input v-model="current.name" placeholder="请输入内容"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>


<!--  <div class="card">-->
<!--    <div class="item-list" v-for="item in tableData">-->
<!--      <slot v-bind:{ row: item }></slot>-->
<!--    </div>-->
<!--    <button>查看</button>-->
<!--  </div>-->

  <script src="./index.js"></script>

</body>

</html>